<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
			 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<title>iCheckbox  v0.2 Demo Page</title>
	<style type="text/css">
	.iCheckbox_container {
		height:27px;
		width:94px;
		position: relative;
		overflow: hidden;
	}
	.iCheckbox_switch {
		height:27px;
		width:94px;
		background-image:url(images/iphone_switch.png); /* your actual slider image */
		background-repeat:none;
		background-position:0px;
	}
	.iCheckbox_checkbox { /* this is kinda moot since it gets hidden, but here to let you know it exists */
	}
	.iCheckbox_two_container {
		height:27px;
		width:94px;
		position: relative;
		overflow: hidden;
	}
	.iCheckbox_two_switch {
		height:16px;
		width:36px;
		background-image:url(images/bpm-lozenge.png); /* your actual slider image */
		background-repeat:none;
		background-position:0px;
	}
	.iCheckbox_two_checkbox { /* Let's pretty or ugly up the checkbox itself */
		border: 2px solid blue;
	}
	/*
	* below are styles to just pretty up the demo page... they have nothing to do with iCheckbox.
	*/
	code {
		font-family:"Courier New", Courier, monospace;
		font-size:10px;
	}
	h2 {
		margin: 0px;
		padding: 0px;
		font-size: 16px;
		line-height: 16px;
	}
	pre {
		padding: 5px;
	}
	.backToTop {
		height: 12px;
		font-size: 10px;
		font-style:italic;
		margin:0px;
		padding: 0px;
	}
	.body_conts{
		margin:0px;
		margin-left:20px;
		margin-right:20px;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
	}
	.css {
		background-color:#A0BD9F;
		color: #000;
	}
	.js {
		background-color:#000;
		color:#0C0;
	}
	.magic_pink {
		background-color: #FF00FF;
		padding: 5px;
		margin:0px;
	}
	#opts {
	}
	#opts li {
		margin-top: 10px;
	}
	#opts li p {
		margin: 0px;
	}
	#toc {
		list-style: none;
		display: block;
		margin: 0px;
		padding: 0px;
	}
	#toc li {
		display:inline-block;
		float: left;
		width: 16.5%;
		margin: 0px;
		padding: 0px;
		text-align:center;
		background-color: #000;
	}
	#toc li a{
		color: #fff;
		text-decoration:none;
		font-weight: bold;
	}
	#toc li a:hover{
		color: #FaF;
		text-decoration: underline;
		font-weight: bold;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
	<script src="jquery.iCheckbox.js" type="text/javascript"></script>
	<script type="text/javascript">
	// mimic console log for IE - must be careful what to log
	if ( typeof(console) == 'undefined' ) {
		var console = {};
	}
	if ( typeof(console.log) !== 'function' ) {
		console['log'] = function ( msg ) {
			alert(msg);
		}
	}

	// init the checkboxes at dom ready
	$(document).ready( function () {
		/*
		* first example - defaults
		*/
		$('#checkOne').iCheckbox();
		$('#checkOne').change(function(e){
			if ( $(e.target).attr('checked') == true ) {
				var message = 'checkbox one checked: '+$(e.target).attr('checked');
				if ( console && console.log ) {
					console.log( message );
				} else {
					alert( message );
				}
			}
		});
		/*
		* second example - custom
		*/
		var checkTwoOpts = {
			switch_container_src: 'images/bpm-frame.gif',
			class_container: 'iCheckbox_two_container',
			class_switch: 'iCheckbox_two_switch',
			class_checkbox: 'iCheckbox_two_checkbox',
			switch_speed: 450,
			switch_swing: -18,
			checkbox_hide: false
			};
		$('#checkTwo').iCheckbox( checkTwoOpts );
		$('#checkTwo').change(function(e){
			if ( $(e.target).attr('checked') == true ) {
				var message = 'checkbox two checked: '+$(e.target).attr('checked');
				if ( console && console.log ) {
					console.log( message );
				} else {
					alert( message );
				}
			}
		});
	});
	</script>
</head>
<body>
	<div class="body_conts">
	<h1><a name="doc_top">iCheckbox - Inspired Checkbox v0.2</a></h1>
		<p>
			Convert a checkbox or multiple checkboxes into iphone style switches.
			This is based on the jQuery iphoneSwitch plugin by Daniel LaBare.
		</p>
		<p>
			In this documentation <span class="css">text like this</span> denotes CSS source code and <span class="js">text like this</span> denotes JavaScript source code.
		</p>
		<ul id="toc">
			<li><a href="#Features">Features</a></li>
			<li><a href="#Syntax">Syntax</a></li>
			<li><a href="#Options">Options</a></li>
			<li><a href="#Examples">Examples</a></li>
			<li><a href="#Credits">Credits</a></li>
			<li><a href="#ChangeLog">Change Log</a></li>
		</ul>
		<div style="clear: both; overflow:hidden; height:10px; width: 1px;">&nbsp;</div>
		<h2><a name="Features">Features</a></h2>
		<p class="backToTop"><a href="#doc_top">back to top</a></p>
		<ul>
			<li>Because checkboxes are used, this is compatable with having javascript off for form submission.</li>
			<li>Affects only checkboxes.</li>
			<li>Synchronizes the actual state of the checkbox for on or off status.</li>
			<li>Completely self-contained for each checkbox.</li>
			<li>Changes fire the onchange event of your checkbox.</li>
			<li>Relies purely on css for styling... no passing anything but your slider image.</li>
			<li>Because functionality is decoupled from CSS, you can assign custom CSS classes if you wish making it possible for multiple versions of switches per page.</li>
			<li>If you define your own CSS for the default classes and place your own default images, the only thing needed is the JavaScript file.</li>
			<li>Completely inline like a normal checkbox. No sliding-door-float madness.</li>
			<li>Can show or hide the original checkbox depending on settings.</li>
			<li>Switch movement can be horizontal or vertical.</li>
			<li>A separate CSS class name can be set for disabled checkboxes to make them visually different.</li>
		</ul>
		<p>
			To aceive this, a &lt;span&gt; tag is created around the checkbox.
			An &lt;img&gt; is then appended inside of this &lt;span&gt;.
			Finally, the checkbox &lt;input&gt; is optionally hidden.
			The &lt;span&gt; tag can be styled any way you wish.
			It is simply a container for the rest.
			The actual sliding image is assigned to the created &lt;img&gt; via the &quot;background-image&quot; CSS property and its animation is controlled programatically via the &quot;background-position&quot; CSS property.
		</p>
		<h2><a name="Syntax">Syntax</a></h2>
		<p class="backToTop"><a href="#doc_top">back to top</a></p>
		<p>
			iCheckbox has the following syntax. The values shown are the defaults.
		</p>
<pre class="js"><code>var options = {
	checkbox_hide: true,
	class_checkbox: 'iCheckbox_checkbox',
	class_container: 'iCheckbox_container',
	class_disabled : undefined,
	class_switch: 'iCheckbox_switch',
	switch_container_src: 'images/iphone_switch_container.gif',
	switch_direction: 'X',
	switch_height : 27,
	switch_speed: 450,
	switch_swing: -53,
	switch_width : 94
	};
var initial_state = 'off';
$('.some_checkbox').iCheckbox( initial_state, options );</code></pre>
		<h2><a name="Options">Options</a></h2>
		<p class="backToTop"><a href="#doc_top">back to top</a></p>
		<ul id="opts">
			<li>
				<strong>checkbox_hide</strong>
				&quot;checkbox_hide&quot; controls whether or not the original checkbox &lt;input&gt; is hidden after the slider control is created.
				Setting &quot;checkbox_hide&quot; to boolean &quot;true&quot; will cause the checkbox to be hidden automatically.
				The default value is boolean &quot;true&quot;.
			</li>
			<li>
				<strong>class_checkbox</strong>
				&quot;class_checkbox&quot; is the CSS class name that will be applied to the checkbox &lt;input&gt;.
				This name need not match any particular pattern for this plugin to work.
				Assigning this should only be used if you wish the checkbox to remain visible or you need to override how it is hidden.
				The default value is &quot;iCheckbox_checkbox&quot;.
			</li>
			<li>
				<strong>class_container</strong>
				&quot;class_container&quot; is the CSS class name that will be applied to the &lt;span&gt; container.
				This name need not match any particular pattern for this plugin to work.
				The default value is &quot;iCheckbox_container&quot;.
			</li>
			<li>
				<strong>class_disabled</strong>
				&quot;class_disabled&quot; is the optional CSS class name that will be applied to switches assigned to disabled checkboxes.
				If omitted, disabled switches will look just like enabled ones.
				The default value is undefined.
			</li>
			<li>
				<strong>class_switch</strong>
				&quot;class_switch&quot; is the CSS class name that will be applied to the &lt;img&gt; sliding switch.
				This name need not match any particular pattern for this plugin to work, however the &quot;background-image&quot; CSS property must be set to your desired sliding image.
				The default value is &quot;iCheckbox_switch&quot;.
			</li>
			<li>
				<strong>switch_container_src</strong>
				&quot;switch_container_src&quot; is the outer frame image of the slider.
				This should be a GIF (if you want IE6 support) or a PNG with a cutout center in the shape of your choice.
				The image used for the second example above can be seen here.
				A &quot;magic pink&quot; square has been drawn around it so that you can visualize how little the image actually covers.
				It is merely the white corners and the grey inner border.
				<div class="magic_pink"><img src="images/bpm-frame.gif" /></div>
				The &quot;switch_container_src&quot; should never be excluded.
				If anything, you should assign a fully transparent image to it that fits your desired dimensions.
				The default value of &quot;switch_container_src&quot; is &quot;images/iphone_switch_container.gif&quot;.
			</li>
			<li>
				<strong>switch_direction</strong>
				&quot;switch_direction&quot; is the direction of movement for the background image.
				Valid horizontal movement values are &quot;x&quot;, &quot;h&quot;, &quot;horiz&quot;, and &quot;horizontal&quot;.
				Valid vertical movement values are &quot;y&quot;, &quot;v&quot;, &quot;vert&quot;, and &quot;vertical&quot;.
				All values are case-insensitive.
				The default value is &quot;X&quot;.
				<p><em>Technical Note: Since the values for vertical movement are what is detected, any other value will trigger horizontal movement.
				For example, you could set &quot;switch_direction&quot; to &quot;foo&quot; and the switch would move horizontally.</em></p>
			</li>
			<li>
				<strong>switch_height</strong>
				&quot;switch_height&quot; is the height of your slider construct including the outer frame in pixels.
				This usually matches the height dimension of your &quot;switch_container_src&quot; image.
				The default value is &quot;27&quot;.
			</li>
			<li>
				<strong>switch_speed</strong>
				&quot;switch_speed&quot; is the amount of time in miliseconds that the animation should run.
				You should note that the onchange() event for the given checkbox will not fire until the animation ends.
				Thus, giving this a large value will delay the onchange() event just as much.
				The default value is &quot;150&quot;.
			</li>
			<li>
				<strong>switch_swing</strong>
				&quot;switch_swing&quot; is the amount that your actual slider element image should travel to arrive at the &quot;off&quot; state in pixels.
				This correlates directly to the CSS background-position property.
				The &quot;switch_swing&quot; amount is usually a negative number relative to the amount of &quot;peek-a-boo&quot; space required by your image.
				For example, the image below is 54 pixels wide.
				We allow for 18 pixels of our state showing, so the &quot;switch_swing&quot; is &quot;-18&quot;.
				<div style="text-align:center"><img src="images/bpm-lozenge.png" /></div>
				The "on" state assumes this image to have CSS &quot;background-position: 0px 0px;&quot;.
				The default value of &quot;switch_swing&quot; is &quot;-53&quot;.
			</li>
			<li>
				<strong>switch_width</strong>
				&quot;switch_width&quot; is the width of your slider construct including the outer frame in pixels.
				This usually matches the width dimension of your &quot;switch_container_src&quot; image.
				The default value is &quot;94&quot;.
			</li>
		</ul>
		<h2><a name="Examples">Examples</a></h2>
		<p class="backToTop"><a href="#doc_top">back to top</a></p>
		<ul>
			<li>
			<h4>Standard Usage</h4>
				Here's a sample checkbox slider control using the default CSS classes and Daniel LaBare's original images.
				This one actually controls the display of the &quot;debug&quot; messages used for our examples on this page (Firebug console messages and, failing that, alert() boxes).
				<p><input type="checkbox" id="checkOne" /></p>
<pre class="css"><code>.iCheckbox_container {
	height:27px;
	width:94px;
	position: relative;
	overflow: hidden;
}
.iCheckbox_switch {
	height:27px;
	width:94px;
	background-image:url(images/iphone_switch.png); /* your actual slider image */
	background-repeat:none;
	background-position:0px;
}
.iCheckbox_checkbox { /* this is kinda moot since it gets hidden, but here to let you know it exists */
}</code></pre>

				<pre class="js"><code>/*
* first example - defaults
*/
$('#checkOne').iCheckbox();
$('#checkOne').change(function(e){
	if ( $(e.target).attr('checked') == true ) {
		var message = 'checkbox one checked: '+$(e.target).attr('checked');
		if ( console && console.log ) {
			console.log( message );
		} else {
			alert( message );
		}
	}
});</code></pre>
			</li>
			<li>
				<h4>Custom Classes with Visible Checkbox</h4>
				This is an example of a slider control using CSS classes assigned at creation with a custom look and the corresponding checkbox still visible.
				This slider does nothing more than send &quot;debug&quot; messages.
				<p><input type="checkbox" id="checkTwo" /></p>
<pre class="css"><code>.iCheckbox_two_container {
	height:27px;
	width:94px;
	position: relative;
	overflow: hidden;
}
.iCheckbox_two_switch {
	height:16px;
	width:36px;
	background-image:url(images/bpm-lozenge.png); /* your actual slider image */
	background-repeat:none;
	background-position:0px;
}
.iCheckbox_two_checkbox { /* Let's pretty or ugly up the checkbox itself */
	border: 2px solid blue;
}</code></pre>
				<pre class="js"><code>/*
* second example - custom
*/
var checkTwoOpts = {
	switch_container_src: 'images/bpm-frame.gif',
	class_container: 'iCheckbox_two_container',
	class_switch: 'iCheckbox_two_switch',
	class_checkbox: 'iCheckbox_two_checkbox',
	switch_speed: 450,
	switch_swing: -18,
	checkbox_hide: false
	};
$('#checkTwo').iCheckbox( checkTwoOpts );
$('#checkTwo').change(function(e){
	if ( $(e.target).attr('checked') == true ) {
		var message = 'checkbox two checked: '+$(e.target).attr('checked');
		if ( console && console.log ) {
			console.log( message );
		} else {
			alert( message );
		}
	}
});</code></pre>
			</li>
		</ul>
		<h2><a name="Credits">Credits</a></h2>
		<p class="backToTop"><a href="#doc_top">back to top</a></p>
		<ul>
			<li>iphoneSwitch Author: <strong>Daniel LaBare</strong></li>
			<li>iCheckbox Author: <strong>Bryn P. Mosher</strong></li>
			<li>Thanks To: <strong>Kari Waldrep</strong> for inspiring the need for this to be created.</li>
			<li>Thanks To: <strong>jpeffer</strong> For logging issue #3 and inspiring the vertical usage.</li>
		</ul>
		<h2><a name="ChangeLog">Change Log</a></h2>
		<p class="backToTop"><a href="#doc_top">back to top</a></p>
		<p>Though the version number may be below 1.0, this is the official release. I'm just starting the number counting at 0.1.</p>
		<h3>v0.2</h3>
		<ul>
			<li>Feature: Added support for vertical switch movement.</li>
			<li>Feature: Moved initial state to an option and if omitted, the initial state of the bound checkbox will be matched.</li>
			<li>Feature: Added support for a disabled class to be assigned to disabled checkboxes.</li>
			<li>Task: Cleaned up documentation</li>
			<li>Task: Added vertical example to documentation</li>
			<li>Task: Added disabled example to documentation</li>
			<li>Task: Added change log to documentation</li>
			<li>Task: Added menu to Documentation</li>
			<li>Task: Added menu to Documentation</li>
			<li>Fixed: Issue where older versions of IE did not recognize background-position (http://code.google.com/p/icheckbox/issues/detail?id=3)</li>
			<li>Fixed: Issue where newer versions of jQuery (>=1.4.x) do not perform jQuery.animate() on non-numeric and compound values (http://code.google.com/p/icheckbox/issues/detail?id=4)</li>
		</ul>
		<h3>v0.1</h3>
		<ul>
			<li>Initial release</li>
		</ul>
	</div>
</body>
</html>